<!doctype html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<meta name="author" content="https://github.com/gitbrent">
	<meta name="website" content="https://github.com/gitbrent/xlsx-js-style/">
	<meta name="version" content="1.2.0">
	<meta name="updated" content="2022-04-04">
	<title>xlsx-js-style browser demo</title>
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootswatch/5.1.3/darkly/bootstrap.min.css"
		integrity="sha512-ZdxIsDOtKj2Xmr/av3D/uo1g15yxNFjkhrcfLooZV5fW0TT7aF7Z3wY1LOA16h0VgFLwteg14lWqlYUQK3to/w==" crossorigin="anonymous" referrerpolicy="no-referrer" />
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootswatch/5.1.0/yeti/bootstrap.min.css"
		integrity="sha512-weyvl9mBvXvMHAcN2LCuQ5w0i7ihzrg3EQy6HixwCP88lXKbkL8IRYG8K75sCx1bRTQRDBXLfpW3fKlYfAAsaw==" crossorigin="anonymous" referrerpolicy="no-referrer"
		media="(prefers-color-scheme: no-preference), (prefers-color-scheme: light)" />
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.24.1/themes/prism-okaidia.min.css"
		integrity="sha512-mIs9kKbaw6JZFfSuo+MovjU+Ntggfoj8RwAmJbVXQ5mkAX5LlgETQEweFPI18humSPHymTb5iikEOKWF7I8ncQ==" crossorigin="anonymous" referrerpolicy="no-referrer" />
	<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p"
		crossorigin="anonymous"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.15.0/prism.min.js"></script>
	<!--
		<script src="../../dist/xlsx.bundle.js"></script>
	-->
	<!--
		<script src="./js/jszip.js"></script>
		<script src="../../dist/xlsx.min.js"></script>
	-->
	<script src="./js/jszip.js"></script>
	<script src="../../src/xlsx.js"></script>
	<!--
	-->
	<script>
		// ==================================================================================================================

		function popDemoCode() {
			document.querySelector("#codeDemo").textContent =
				'// STEP 1: Create a new Workbook\n'
				+ 'const wb = XLSX.utils.book_new();\n'
				+ '\n'
				+ '// STEP 2: Create data rows\n'
				+ 'let row1 = ["a", "b", "c"];\n'
				+ 'let row2 = [1, 2, 3];\n'
				+ 'let row3 = [\n'
				+ "    {v: 'Courier: 24', t: 's', s: {font: {name: 'Courier', sz: 24}}},\n"
				+ "    {v: 'bold & color', t: 's', s: {font: {bold: true, color: {rgb: 'FF0000'}}}},\n"
				+ "    {v: 'fill: color', t: 's', s: {fill: {fgColor: {rgb: 'E9E9E9'}}}},\n"
				+ "    {v: 'line\\nbreak!', t: 's', s: {alignment: {wrapText: true}}},\n"
				+ '];\n'
				+ '\n'
				+ '// STEP 3: Create Worksheet, add data, set cols widths\n'
				+ "const ws = XLSX.utils.aoa_to_sheet([row1, row2, row3]);\n"
				+ "ws['!cols'] = [{width: 30}, {width: 20}, {width: 20}];\n"
				+ "XLSX.utils.book_append_sheet(wb, ws, 'browser-demo');\n"
				+ '\n'
				+ '// STEP 4: Write Excel file to browser\n'
				+ 'XLSX.writeFile(wb, "xlsx-js-style-demo.xlsx");\n';

			Prism.highlightElement(document.querySelector("code.language-javascript"));
		}

		// ==================================================================================================================

		function doDemoBrowser() {
			const wb = XLSX.utils.book_new();
			let row1 = ["a", "b", "c"];
			let row2 = [1, 2, 3];
			let row3 = [
				{ v: 'Courier: 24', t: 's', s: { font: { name: 'Courier', sz: 24 } } },
				{ v: 'bold & color', t: 's', s: { font: { bold: true, color: { rgb: 'FF0000' } } } },
				{ v: 'fill: color', t: 's', s: { fill: { fgColor: { rgb: 'E9E9E9' } } } },
				{ v: 'line\nbreak', t: 's', s: { alignment: { wrapText: true } } },
			]
			const ws = XLSX.utils.aoa_to_sheet([row1, row2, row3]);
			ws['!cols'] = [{ width: 30 }, { width: 20 }, { width: 20 }]
			XLSX.utils.book_append_sheet(wb, ws, 'browser-demo');
			XLSX.writeFile(wb, "xlsx-js-style-demo.xlsx");
		}

		function doDemoAll() {
			const BORDERS = ['dashDotDot', 'dashDot', 'dashed', 'dotted', 'hair', 'mediumDashDotDot', 'mediumDashDot', 'mediumDashed', 'medium', 'slantDashDot', 'thick', 'thin'];
			const DEF_ColW = 30;
			const DEF_RowH = 60;
			const BORDER_ALL = { border: { top: { style: 'thick', color: { rgb: '4b0082' } }, right: { style: 'thick', color: { rgb: '4b0082' } }, bottom: { style: 'thick', color: { rgb: '4b0082' } }, left: { style: 'thick', color: { rgb: '4b0082' } } } };
			const DEF_Size14Vert = { font: { sz: 14 }, alignment: { vertical: 'center', horizontal: 'center' } };
			const DEF_FixedSize14 = { font: { name: 'Courier New', sz: 14, color: { rgb: '9e9e9e' } } };
			const DEF_FixedSize14Wht = { font: { name: 'Courier New', sz: 12, color: { rgb: 'f1f1f1' } } };
			const DEF_FixedSize14Vert = { font: { name: 'Courier New', sz: 12 }, alignment: { horizontal: 'center', vertical: 'center', wrapText: true } };
			const DEF_FxSz14RgbVert = { font: { name: 'Courier New', sz: 12, color: { rgb: '9e9e9e' } }, alignment: { vertical: 'center', horizontal: 'center', wrapText: true } };

			const wb = XLSX.utils.book_new();

			let rowDEMO = [
				{ v: 'xlsx-js-style', t: 's', s: { ...DEF_Size14Vert, fill: { fgColor: { rgb: '5ebd3e' } }, font: { sz: 16, name: 'Courier', bold: true } } },
				{ v: 'javascript', t: 's', s: { ...DEF_Size14Vert, fill: { fgColor: { rgb: 'ff5900' } }, font: { sz: 18, color: { rgb: 'f1f1f1' } } } },
				{ v: 'library is', t: 's', s: { ...DEF_Size14Vert, fill: { fgColor: { rgb: 'f78200' } }, font: { sz: 18, name: 'Courier' } } },
				{ v: 'sheetjs', t: 's', s: { ...DEF_Size14Vert, fill: { fgColor: { rgb: 'e23838' } }, font: { sz: 28 } } },
				{ v: ' plus ', t: 's', s: { ...DEF_Size14Vert, fill: { fgColor: { rgb: '973999' } }, font: { sz: 22, name: 'Helvetica Neue', color: { rgb: 'f1f1f1' } } } },
				{ v: 'STYLE!', t: 's', s: { ...DEF_Size14Vert, fill: { fgColor: { rgb: '009cdf' } }, ...BORDER_ALL, font: { sz: 18, name: 'Helvetica Neue' } } },
			];

			let rowFill = [
				{ v: "fill\n{rgb: 'e6e6e6'}       ", t: 's', s: { ...DEF_FixedSize14Vert, fill: { fgColor: { rgb: 'e6e6e6' } } } },
				{ v: 'fill\n{theme: 4}            ', t: 's', s: { ...DEF_FixedSize14Vert, fill: { fgColor: { theme: 4 } } } },
				{ v: 'fill\n{theme: 4, tint: 0.4} ', t: 's', s: { ...DEF_FixedSize14Vert, fill: { fgColor: { theme: 4, tint: 0.4 } } } },
				{ v: 'fill\n{theme: 4, tint: 0.6} ', t: 's', s: { ...DEF_FixedSize14Vert, fill: { fgColor: { theme: 4, tint: 0.6 } } } },
				{ v: 'fill\n{theme: 4, tint: 0.8} ', t: 's', s: { ...DEF_FixedSize14Vert, fill: { fgColor: { theme: 4, tint: 0.8 } } } },
				{ v: 'fill\n{theme: 4, tint: -0.5}', t: 's', s: { ...DEF_FixedSize14Vert, fill: { fgColor: { theme: 4, tint: -0.5 } }, ...DEF_FixedSize14Wht } },
			];

			let rowFont = [
				{ v: 'bold: true', t: 's', s: { ...DEF_Size14Vert, font: { sz: 14, bold: true } } },
				{ v: 'color: "00cc00"', t: 's', s: { ...DEF_Size14Vert, font: { sz: 14, color: { rgb: '00cc00' } } } },
				{ v: 'name: "Courier"', t: 's', s: { ...DEF_Size14Vert, font: { sz: 14, name: 'Courier' } } },
				{ v: 'italic: true', t: 's', s: { ...DEF_Size14Vert, font: { sz: 14, italic: true } } },
				//{ v: 'size: 28', t: 's', s: { ...DEF_Size14Vert, font: { sz: 28 } } },
				{ v: 'strike: true', t: 's', s: { ...DEF_Size14Vert, font: { sz: 14, strike: true } } },
				{ v: 'underline: true', t: 's', s: { ...DEF_Size14Vert, font: { sz: 14, underline: true } } },
			];

			let rowAlig = [
				{ v: "align\n{vertical: 'top'}   ", t: 's', s: { ...DEF_FixedSize14, alignment: { wrapText: true, vertical: 'top' } } },
				{ v: "align\n{vertical: 'center'}", t: 's', s: { ...DEF_FixedSize14, alignment: { wrapText: true, vertical: 'center' } } },
				{ v: "align\n{vertical: 'bottom'}", t: 's', s: { ...DEF_FixedSize14, alignment: { wrapText: true, vertical: 'bottom' } } },
				{ v: "align\n{horizontal: 'left'}  ", t: 's', s: { ...DEF_FixedSize14, alignment: { wrapText: true, horizontal: 'left' } } },
				{ v: "align\n{horizontal: 'center'}", t: 's', s: { ...DEF_FixedSize14, alignment: { wrapText: true, horizontal: 'center' } } },
				{ v: "align\n{horizontal: 'right'} ", t: 's', s: { ...DEF_FixedSize14, alignment: { wrapText: true, horizontal: 'right' } } },
			];

			let rowRota = [
				{ v: 'textRotation: 15', t: 's', s: { alignment: { horizontal: 'center', textRotation: 15 } } },
				{ v: 'textRotation: 30', t: 's', s: { alignment: { horizontal: 'center', textRotation: 30 } } },
				{ v: 'textRotation: 45', t: 's', s: { alignment: { horizontal: 'center', textRotation: 45 } } },
				{ v: 'textRotation: 90', t: 's', s: { alignment: { horizontal: 'center', textRotation: 90 } } },
				{ v: 'textRotation: 145', t: 's', s: { alignment: { horizontal: 'center', textRotation: 145 } } },
				{ v: 'textRotation: 160', t: 's', s: { alignment: { horizontal: 'center', textRotation: 160 } } },
			];

			let rowBdr0 = [
				{ v: 'border: right       ', t: 's', s: { ...DEF_FxSz14RgbVert, border: { right: { style: 'thick', color: { rgb: 'FF0000' } } } } },
				{ v: 'border: bottom      ', t: 's', s: { ...DEF_FxSz14RgbVert, border: { bottom: { style: 'thick', color: { rgb: 'FF0000' } } } } },
				{ v: 'border: diagonalUp  ', t: 's', s: { ...DEF_FxSz14RgbVert, border: { diagonal: { style: 'thick', color: { rgb: 'FF0000' } }, diagonalUp: true } } },
				{ v: 'border: top         ', t: 's', s: { ...DEF_FxSz14RgbVert, border: { top: { style: 'thick', color: { rgb: 'FF0000' } } } } },
				{ v: 'border: diagonalDown', t: 's', s: { ...DEF_FxSz14RgbVert, border: { diagonal: { style: 'thick', color: { rgb: 'FF0000' } }, diagonalDown: true } } },
				{ v: 'border: left        ', t: 's', s: { ...DEF_FxSz14RgbVert, border: { left: { style: 'thick', color: { rgb: 'FF0000' } } } } },
			];
			let rowBdr1 = [];
			let rowBdr2 = [];
			BORDERS.filter((_, idx) => idx < 6).forEach(item => {
				rowBdr1.push({
					v: `border: style:\n'${item}'`, t: 's',
					s: { ...DEF_FxSz14RgbVert, border: { right: { style: item, color: { rgb: '0000FF' } } } }
				});
			});
			BORDERS.filter((_, idx) => idx >= 6).forEach(item => {
				rowBdr2.push({
					v: `border: style:\n'${item}'`, t: 's',
					s: { ...DEF_FxSz14RgbVert, border: { right: { style: item, color: { rgb: '0000FF' } } } }
				});
			});

			const ws = XLSX.utils.aoa_to_sheet([rowDEMO, rowFont, rowFill, rowAlig, rowBdr0, rowBdr1, rowBdr2, rowRota]);
			ws['!cols'] = [{ width: DEF_ColW }, { width: DEF_ColW }, { width: DEF_ColW }, { width: DEF_ColW }, { width: DEF_ColW }, { width: DEF_ColW }, { width: DEF_ColW }];
			ws['!rows'] = [{ 'hpt': 100 }, { 'hpt': 40 }, { 'hpt': DEF_RowH }, { 'hpt': DEF_RowH }, { 'hpt': DEF_RowH }, { 'hpt': DEF_RowH }];
			XLSX.utils.book_append_sheet(wb, ws, 'full-demo');
			XLSX.writeFile(wb, "xlsx-js-style-demo-all.xlsx");
		}

		/** FUTURE:
		 * setting style via `ws` prop: https://github.com/gitbrent/xlsx-js-style/issues/2
		 * - the code just does not work this way, if anyone can provide a pull request, I'd be happy to merge it
		 */
		function doIssue() {
			let wb = XLSX.utils.book_new();
			let ws_data = [['hello', 'world']];
			let ws = XLSX.utils.aoa_to_sheet(ws_data);
			ws["A1"].s = {
				font: {
					name: "Calibri",
					sz: 24,
					bold: true,
					color: { rgb: "FFFFAA00" },
				},
			};
			console.log(ws["A1"]);
			console.log(ws["A1"].s);
			XLSX.utils.book_append_sheet(wb, ws, 'Sheet1');
			XLSX.writeFile(wb, "file.xls");
		}

		// ==================================================================================================================
		window.onload = () => {
			popDemoCode();
			console.log('`XLSX.version` ......... = ' + XLSX.version);
			console.log('`XLSX.style_version` ... = ' + XLSX.style_version);
		};
	</script>
</head>
<body>
	<nav class="navbar navbar-expand-lg navbar-dark bg-success">
		<div class="container-fluid">
			<a class="navbar-brand" href="https://gitbrent.github.io/xlsx-js-style/">
				<img src="images/favicon.png" width="30" height="30" class="d-inline-block align-top me-2" alt="favicon" />
				xlsx-js-style
			</a>
			<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-target="#navbarColor01" aria-controls="navbarColor01" aria-expanded="false"
				aria-label="Toggle navigation">
				<span class="navbar-toggler-icon"></span>
			</button>

			<div class="collapse navbar-collapse" id="navbarColor01">
				<ul class="navbar-nav me-auto mb-2 mb-lg-0">
					<li class="nav-item">
						<a class="nav-link active" aria-current="page" href="https://gitbrent.github.io/xlsx-js-style/demo/index.html">Browser Demo</a>
					</li>
				</ul>
				<ul class="navbar-nav">
					<li class="nav-item">
						<a class="nav-link" href="https://github.com/gitbrent/xlsx-js-style/releases">Latest Release</a>
					</li>
					<li class="nav-item">
						<a class="nav-link" href="https://github.com/gitbrent/xlsx-js-style/">GitHub Project</a>
					</li>
					<li class="nav-item">
						<a class="nav-link" href="https://www.npmjs.com/package/xlsx-js-style">npm Package</a>
					</li>
					<li class="nav-item">
						<a class="nav-link" href="https://github.com/gitbrent/xlsx-js-style/">Documentation</a>
					</li>
				</ul>
			</div>
		</div>
	</nav>

	<header class="container my-4">
		<div class="row">
			<div class="col">
				<h2 class="mb-0"><code>xlsx-js-style</code> browser demo</h2>
			</div>
		</div>
	</header>

	<main class="container">
		<div class="row mb-3">
			<div class="col">
				<pre class="border bg-dark"><code id="codeDemo" class="language-javascript"></code></pre>
			</div>
		</div>
		<div class="row">
			<div class="col-auto">
				<button class="btn btn-lg btn-success px-5" onclick="doDemoBrowser()">Browser Demo</button>
			</div>
			<div class="col-auto">
				<button class="btn btn-lg btn-success px-5" onclick="doDemoAll()">Full Feature Demo</button>
			</div>
		</div>
	</main>
</body>
</html>
